<template>
  <div class="form-box">
    <el-button
      v-if="layoutData.button"
      type="warning"
      icon="el-icon-plus"
      @click="addCard"
    >
      {{ layoutData.button }}
    </el-button>
    <div v-show="layoutData.cardList.length">
      <div
        class="cardItem"
        v-for="(item, index) in layoutData.cardList"
        :key="index"
      >
        <el-form ref="refsForm" :model="item" label-width="auto" @submit.native.prevent>
          <el-form-item
            label="模块显示顺序："
            :prop="`${item.id},${item.sort}`"
            :rules="rules.sort"
          >
            <el-input
              maxlength="2"
              style="width:8%"
              v-model.trim="item.sort"
              @input="validateSort($event, item)"
            ></el-input>
            <i
              class="el-icon-close click-close"
              @click="delCard(item.id)"
              v-if="layoutData.button"
            ></i>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <slot :itemInfo="item"></slot>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: ['layoutData'],
  data() {
    var validateSort = (rule, value, callback) => {
      const id = Number(rule.field.split(',')[0])
      const sort = Number(rule.field.split(',')[1])
      if (!sort || sort < 0) {
        callback(new Error('请输入1-99的整数,且不能为空'))
        return
      }
      this.isExistence({
        id,
        sort,
        callbackFun: function() {
          callback(new Error('模块顺序不能重复'))
        }
      })
    }
    return { rules: { sort: [{ validator: validateSort, trigger: 'blur' }] } }
  },
  mounted() {},
  methods: {
    /* 排序 */
    ...mapActions('landingPage', ['isExistence']),
    /* 新增banner位 */
    addCard() {
      const { name } = this.layoutData
      let cardData = {}
      switch (name) {
        case 'bannerConfig':
          cardData = { id: new Date().getTime(), name, sort: '', tableData: [] }
          break
        case 'uploadVideo':
          cardData = {
            id: new Date().getTime(),
            name,
            sort: '',
            background: 'pureColour',
            color: 'rgba(255, 69, 0, 1)',
            backgroundImg: '',
            videoUrl: '',
            cover: ''
          }
          break
        case 'inputQuantity':
          cardData = {
            id: new Date().getTime(),
            name,
            sort: '',
            tipTetx: '',
            color: 'rgba(255, 69, 0, 1)',
            buttonImg: ''
          }
          break
        case 'countdown':
          cardData = {
            id: new Date().getTime(),
            name,
            sort: '',
            writing: '',
            countdown: [],
            fontSize: '',
            color: 'rgba(255, 69, 0, 1)'
          }
          break
        case 'actionButton':
          cardData = {
            id: new Date().getTime(),
            name,
            sort: '',
            buttonImg: '',
            actionType: 'LINK',
            link: ''
          }
          break
        case 'marquee':
          cardData = {
            id: new Date().getTime(),
            name,
            sort: '',
            marqueeData: [],
            fontSize: '',
            color: 'rgba(255, 69, 0, 1)'
          }
          break
        case 'setUpText':
          cardData = { id: new Date().getTime(), name, sort: '', content: '' }
          break
        case 'preachImg':
          cardData = {
            id: new Date().getTime(),
            name,
            sort: '',
            imgUrl: '',
            action: '',
            link: ''
          }
          break
      }
      this.layoutData.cardList.push(cardData)
    },
    /* 校验 */
    validateData() {
      let flag = true
      if (this.$refs['refsForm']) {
        this.$refs['refsForm'].forEach((item) => {
          item.validate((valid) => (flag = valid))
        })
      }
      return flag
    },
    /* 排序输入为数字 */
    validateSort(val, { id }) {
      const sort = val.replace(/[^\d]/g, '')
      this.layoutData.cardList.forEach((item) => {
        if (item.id === id) item.sort = Number(sort) || ''
      })
    },
    /* 删除banner位 */
    delCard(id) {
      const res = this.layoutData.cardList.filter((item) => item.id !== id)
      this.layoutData.cardList = res
      this.$store.commit('landingPage/deleteSort', id)
    }
  }
}
</script>
<style lang="less" scoped>
.cardItem {
  width: 1000px;
  padding: 10px 20px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .el-divider--horizontal {
    margin: 10px 0 !important;
  }
  .click-close {
    position: relative;
    font-size: 25px;
    left: 90%;
    cursor: pointer;
  }
}
</style>
